<template>
  <div id="street-enterprise" style="width:100%;height:100%;pointer-events:all"></div>
</template>
<script>
export default {
  data() {
    return {}
  },
  mounted() {
    this.getData()
  },
  created() {
    
  },
  methods: {
    // 获取数据
    getData() {
      this.$get('/literaryform/getStreet').then(res => {
        this.renderEcharts(res.data)
      })
    },
    // 渲染柱形图
    renderEcharts(data) {
      let myChart = this.$echarts.init(document.getElementById('street-enterprise'))
      /*
      横向柱形图的本质是：X轴的type: 'value'；Y轴的type: 'category',仅此而已
      多个数据就配多个series
      */
      const color = ['#ff9500',] //2个以上的series就需要用到color数组
      const legend = {
        show: false
      }
      const tooltip = {
        show: true,
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
        backgroundColor: "#404C73",
        borderColor: "#404C73",
        textStyle: {
          color: '#FFF', // 文字的颜色
        }
      }
      const commonSeries = {
        type: 'bar',
        barWidth: '35%', // 柱条的宽度，不设时自适应。
        itemStyle: {
          //定义柱子的样式
          borderRadius: [0, 5, 5, 0], //柱子圆角[上右下左]，也可以统一值。
          // color:'red' //不写color，每个series取上面定义的全局color，很好的啊
          // 自己来自定义color
          color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
            { offset: 0, color: '#4DFCE0' }, // #4DA6FE
            { offset: 0.8, color: '#4DA6FE' }, // #4DFCE0
            { offset: 1, color: '#4DA6FE' }
          ])
        },
        showBackground: true, // 柱子是否带有背景，默认是没有的
        backgroundStyle: {
          // 只有showBackground=true，设置backgroundStyle才会有效果
          color: '#19417A', //
          borderRadius: [0, 5, 5, 0],
        },
        label: {
          show: false,
          position: 'right'
        }
      }
      let series = [{
        name: '',
        data: data.map(item => {
          return item.value
        }) 
      }]
      series = series.map((item) => ({
        ...item,
        ...commonSeries,
      }))
      let option = {
        color,
        legend,
        tooltip,
        grid: {
          top: '5%',
          left: '1%',
          right: '3%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisLine: {
            show: true, // 显示Y轴
            lineStyle: {
              color: 'rgba(255,255,255,.4)',
            }
          },
          axisTick: {
            show: false, //不显示小的刻度线
          },
          axisLabel: {
            color: '#ffffff', //x轴label文字颜色
          },
          splitLine: {
            show: false, //不显示竖向分割线
          },
        },
        yAxis: {
          type: 'category',
          axisLine: {
            show: true, // 显示X轴
            lineStyle: {
              color: 'rgba(255,255,255,.4)',
            }
          },
          axisTick: {
            show: false, //不显示小的刻度线
          },
          axisLabel: {
            color: '#ffffff', //x轴label文字颜色
            interval: 0,  
            rotate: 30   //值>0向右倾斜，值<0则向左倾斜
          },
          splitLine: {
            show: false, //不显示横向分割线
          },
          data: data.map(item => {
            return item.name
          }) 
        },
        series
      }
      //图表自动轮播高亮显示函数 myChart直接用
      const animation = (delay = 3000) => {
        let currentIndex = -1
        const length = option.series[0].data.length
        setInterval(() => {
          currentIndex = (currentIndex + 1) % length
          // 高亮当前图形
          myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,

            dataIndex: currentIndex,
          })
          // 显示 tooltip
          myChart.dispatchAction({
            type: 'showTip',

            seriesIndex: 0,
            dataIndex: currentIndex,
          })
        }, delay)
      }
      animation(4000)
      myChart.setOption(option)
    }
  }
}
</script>

